<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="我的客户" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="" style="padding: 20rpx">
              <view style="background-color: #fff; border-radius: 10rpx">
                <view
                  class="itemView2"
                  v-for="(item, index) in itemList[index2]"
                  :key="index"
                  @click="routeTo(item)"
                >
                  <u-avatar src="" size="80"></u-avatar>
                  <view class="" style="margin-left: 15rpx; flex: 1">
                    <view class="itemHead">
                      <text class="itemTitle">{{ item.userAlias || item.nickname }}</text>
                      <u-icon name="/static/img/bj.png" size="30"> </u-icon>
                    </view>
                    <view class="itemTime">
                      <view>邀请时间：{{ inviteTime(item.createTime) }}</view>
                    </view>
                  </view>
                  <!-- <view class="" style="float: right;">
										<view class="" style="text-align: right;">
											{{item.tradeCount}}次
										</view>
										<view class="">
											下单次数
										</view>
									</view> -->
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <!-- <swiper-item class="swiperItem">
					<z-paging ref="paging1" v-model="itemList1" @query="queryList1" :fixed="false" :auto="false"
						:empty-view-img="`${getImageUrl('empty.png')} `" empty-view-text="暂无订单数据~" :empty-view-img-style="imgStyle">

					</z-paging>
				</swiper-item> -->
        <!-- <swiper-item class="swiperItem">
					<z-paging ref="paging3" v-model="itemList3" @query="queryList3" :fixed="false" :auto="false"
						:empty-view-img="`${getImageUrl('empty.png')} `" empty-view-text="暂无订单数据~" :empty-view-img-style="imgStyle">

					</z-paging>
				</swiper-item> -->
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '全部',
          status: ''
        },
        {
          name: '直邀客户',
          status: 1
        },
        {
          name: '间邀客户',
          status: 2
        }
      ],
      itemList: [[], [], [], []],
      order_id: ''
    }
  },
  onLoad(res) {
    this.queryList()
  },
  onShow() {},
  computed: {
    inviteTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      // let daynamicPaging = this.tabsList > 0 ? 'paging' + this.current :  'paging'
      // this.$refs[daynamicPaging].complete(this.itemList)
      this.$u
        .get('/app-api/trade/brokerage-user/page', {
          pageNo,
          pageSize,
          level: this.tabsList[this.current].status
        })
        .then((res) => {
          this.$refs.paging[this.current].complete(res.data.list)
        })
    },

    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      // self.$u.api.setTestPayments({
      // 	order_no: item.order_no,
      // 	openid: uni.getStorageSync('openid')
      // }).then(res => {
      // 	setTimeout(function() {
      // 		self.onOrderLoad(self.current, null, true);
      // 	}, 500);
      // });
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },
    routeTo(e) {
      uni.navigateTo({
        url:
          '/other_center/salesman-customer/salesman-customer?id=' + e.id + '&nickname=' + e.nickname
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.moneyView {
  height: 200rpx;
  background: #fff;
  box-shadow: 0px 4rpx 10rpx 0px rgba(219, 219, 219, 0.42);
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
}

.withdrawal {
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #fdea11;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b65a00;
  margin-left: 40rpx;
}

.tabView {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0px;
}

.itemView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemView2 {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}

.itemTitle {
  margin-right: 10rpx;
}

.itemTime {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  margin-top: 15rpx;
}
.cs {
  background-color: #fff;
  padding: 40rpx;
}
.cs-t {
  font-size: 24rpx;
}
.price {
  font-size: 48rpx;
  margin: 20rpx 0;
}
.w-btn {
  display: inline-block;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  background-color: #8cc340;
  color: #fff;
  border-radius: 45rpx;
  margin-left: 30rpx;
}
</style>
